<template>
    <div>
        <p style="font-size: 14px;text-indent: 16px;color: #aaa;margin: 0;padding: 0;line-height: 39px;">上传投稿凭证</p>
        <div style="box-shadow: 0 8px 12px #ebedf0;">
            <van-cell-group>
                <van-field v-model="form.submit_remark" ref="remark" rows="2" autosize label="投稿链接" type="textarea" right-icon="question" @click-right-icon="showDemo(demoLink)"
                           maxlength="1000" placeholder="请将你发布的内容链接复制粘贴到这里" show-word-limit class="uploadUrl">
                </van-field>
                <van-field v-model="form.submit_img" label="投稿凭证">
                    <template slot="input" slot-scope="props">
                        <div style="display: flex;" id="submitIcon">
                            <div class="van-image van-uploader__preview-image" style="margin-right: 10px;">
                                <van-image :src="demoImg" @click="showDemo(demoImg)" style="height: 100%;width: 100%;"/>
                            </div>
                            <div class="van-uploader__upload" @click="chooseImg">
                                <i class="van-icon van-icon-photograph van-uploader__upload-icon"></i>
                            </div>
                        </div>
                        <img id="submitImg" alt="" style="width: 100%;display: none;" @click="chooseImg" />
                    </template>
                </van-field>
            </van-cell-group>
        </div>
        <div style="width: 100%;padding:16px;box-sizing: border-box;">
            <van-button color="linear-gradient(to right,#ff6034,#ee0a24)" style="border-radius: 22px;" block @click="submit" :loading="submitting">确定</van-button>
        </div>
    </div>
</template>

<script>
    import wx from 'weixin-js-sdk';
    import {getQueryVariable} from "../../utils/public";
    import {Dialog,Toast,Notify,ImagePreview} from 'vant';
    export default {
        name: "TalentUpload",
        data(){
            return{
                form:{
                    work_id:'',
                    submit_img:'',
                    submit_remark:'',
                },
                submitting:false,
                demoImg: 'https://lf-public.oss-cn-shenzhen.aliyuncs.com/upload/comment.png',
                demoLink:'https://lf-public.oss-cn-shenzhen.aliyuncs.com/upload/link.jpg',
            }
        },
        mounted(){
            this.sdk();
            // 接收参数
            if(this.$route.query.work_id){
                this.form.work_id = this.$route.query.work_id;
            } else {
                this.form.work_id = getQueryVariable('work_id');
            }
            if(!this.form.work_id){
                Dialog({message:'未找到此工单信息'}).then(()=>{ this.$router.back()});
            }
        },
        methods:{
            chooseImg() {
                console.log('chooseImg');
                let that = this;
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (result) {
                        Toast.loading({
                            message: '正在上传...',
                            forbidClick: true,
                            duration: 0,
                        });
                        wx.uploadImage({
                            localId: result.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function (res) {
                                // 保存服务器端ID
                                that.form.submit_img = res.serverId;
                                // 预览图片
                                if(/(Android)/i.test(navigator.userAgent)){
                                    document.getElementById('submitImg').setAttribute('src', result.localIds[0]);
                                    document.getElementById('submitImg').style.display = 'block';
                                    document.getElementById('submitIcon').style.display = 'none';
                                }else{
                                    // ios无法预览，需要base64编码
                                    wx.getLocalImgData({
                                        localId: result.localIds[0], // 图片的localID
                                        success: function (res) {
                                            document.getElementById('submitImg').setAttribute('src',res.localData);
                                            document.getElementById('submitImg').style.display = 'block';
                                            document.getElementById('submitIcon').style.display = 'none';
                                        }
                                    });
                                }
                                Toast.clear();
                            },
                            fail: function (res) {
                                Toast.clear();
                                Notify('图片上传失败，请重试');
                                console.log(res);
                            },
                        });
                    },
                    fail: function (res) {
                        Toast('choose image error');
                        that.post('/api/common/log',{chooseImageError:res}).then(result=>{
                            Toast('choose image error2');
                        });
                    },
                });
            },
            showDemo(img){
                ImagePreview({
                    images:[img],
                    closeOnPopstate:true,
                    showIndex:false,
                    startPosition:0,
                });
            },
            submit(){
                let form = this.form;
                // 验证必填信息
                if(!form.submit_remark){
                    Notify('请输入投稿链接');
                    return;
                }
                if(!form.submit_img){
                    Notify('请上传投稿凭证');
                    return;
                }
                this.submitting = true;
                this.post('/api/client/talent/upload',form).then(result=>{
                    if(result.code === 0){
                        Dialog.alert({
                            title:'提交成功',
                            message:result.msg,
                        }).then(()=>{
                            this.$router.back();
                        });
                    } else {
                        Toast(result.msg);
                    }
                    this.submitting = false;
                })
            },
            sdk(){
                // 接入jssdk
                if(/(Android)/i.test(navigator.userAgent)){
                    this.post('/api/common/jsapi',{url:location.href.split('#')[0]}).then(result=>{
                        if(result.code === 0){
                            wx.config(result.data);
                        }
                    });
                    wx.ready(function () {
                        console.log('wx.ready');
                    });
                    wx.error(function (res) {
                        console.log(res);
                    });
                }
            },
        }
    }
</script>

<style scoped>

</style>
<style>
    .uploadUrl .van-cell__value .van-field__body{
        align-items: flex-start;
    }
</style>